<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			Video Browse
		</title>
		<style>
			.navbar{margin-bottom: 6px;border-bottom: 1px solid #ddd;height:31px;padding:6px;}
			.navbar span{border:1px solid #ddd;padding: 4px 12px;display: block;float: left;margin-right: 5px;}
			.navbar span:hover{background: rgb(236,236,236);}
			.active {font-weight: 700;}
			.navbar a{color: #484848;font-size: 13px;text-decoration: none;}
			
			.thumbnail{display:table; width:120px;height:90px;line-height: 90px;position:relative;cursor:pointer;margin-bottom: 3px;}
			.thumbnail img{display:inline-block;max-width:120px;max-height:90px; vertical-align: middle;}
			
			.picturebox{font-size: 13px;text-align: center;height: 120px;}
			.picturebox:hover{background: rgb(236,236,236);}
		</style>
		<script src="../../../../aceadmin/dist/js/jquery1x.min.js"></script>
	</head>
	<body style="margin: 0px;">
		<form>
			<div id="pictureSetCate" class="navbar">
				<span><a id="allPictureSet" href="javascript:loadPictureSet('allPictureSet');" class="active">全部</a></span>
			</div>
			<div id="pictureSetGroup">
			</div>
			<div id="pictureGroup" style="display: none;">
			</div>
		</form>
	</body>
	
	<script type="text/javascript">
		$(window).load(function(){
			$('#pictureSetGroup').css('height',$(window).height()-55);
			$('#pictureSetGroup').css('overflow-y',"auto");
		
			loadPictureSet('allPictureSet');
		})
		
		function loadPictureSet(cateId){
			var apiurl = location.href.split("?apiurl=")[1].split("&")[0];
			
			 $.ajax({
			  url: apiurl,
			  type: 'GET',
			  crossDomain: true,
			  cache: false,
			  data:{"pictureCateId":cateId=="allPictureSet"?null:cateId},
			  dataType: "json",
			  headers: { 'Content-Type': 'application/json' },
			  xhrFields:{withCredentials: true},
			  success:function(data) {
			    
			    if(data.code == 'success') {
					$("#pictureSetGroup").html("");
					$("#pictureGroup").css("display","none");
					$("#pictureSetGroup").css("display","");
					
					if($("#pictureSetCate").find("SPAN").length==1){
						data.body.pictureCate.forEach(function(cate,index){
							var nav = $("<span><a id=\""+cate.id+"\" href=\"javascript:loadPictureSet('"+cate.id+"')\">"+cate.name+"</a></span>");
							$("#pictureSetCate").append(nav);
						})
					}
					$(".active").removeClass("active");
					$("#"+cateId).addClass("active");
					
					data.body.pageInfo.list.forEach(function(pictureSet,index){
						var logoUrl=pictureSet.passenger["logoUrl"];
						var pictureSet = $("<div class='picturebox' onclick=\"loadPicture('"+pictureSet.id+"','"+pictureSet.name+"')\" style='margin:5px;float:left;border: 1px solid #ddd;'>"
							+"<span class='thumbnail'><img alt='图册预览' src='"+logoUrl+"' /></span>"+pictureSet.name+"</div>");
						$("#pictureSetGroup").append(pictureSet);
					})
			    }
			  },
			  error:function(e){
				  $("#pictureSetGroup").html(e.responseText);
			 }
			})
		}
		
		function loadPicture(pictureSetId,pictureSetName){
			var apiurl = location.href.split("?apiurl=")[1].split("&")[0];
			apiurl = apiurl.substring(0,apiurl.indexOf("/browsePictureSet"))+"/browsePicture";
			
			 $.ajax({
			  url: apiurl,
			  type: 'GET',
			  crossDomain: true,
			  cache: false,
			  data:{"pictureSetId":pictureSetId},
			  dataType: "json",
			  headers: { 'Content-Type': 'application/json' },
			  xhrFields:{withCredentials: true},
			  success:function(data) {
			    
			    if(data.code == 'success') {
					$("#pictureGroup").html("<div style='margin:0 5px;'><span style='color:#484848;font-size:18px;font-weight:700;'>"+pictureSetName+"</span><a style='margin-left:20px;color:#484848;font-size: 13px;text-decoration: none;' href='javascript:openPictureSet();'>返回</a></div>");
					$("#pictureGroup").show();
					$("#pictureSetGroup").hide();
				
					data.body.pageInfo.list.forEach(function(picture,index){
						var logoUrl=picture.passenger["logoUrl"];
						var picture = $("<div class='picturebox' onclick=\"selectPicture('"+picture.passenger["pictureUrl"]+"')\" style='margin:5px;float:left;border: 1px solid #ddd;'>"
							+"<span class='thumbnail'><img alt='图片预览' src='"+logoUrl+"' /></span>"+picture.name+"</div>");
						$("#pictureGroup").append(picture);
					})
			    }
			  },
			  error:function(e){
				  $("#pictureGroup").html(e.responseText);
			 }
			})
		}
		
		function selectPicture(pictureUrl){
			var callback = location.href.split("CKEditorFuncNum=")[1].split("&")[0];
			window.opener.CKEDITOR.tools.callFunction(callback, pictureUrl);
			window.close();
		}
		
		function openPictureSet(){
			$("#pictureGroup").hide();
			$("#pictureGroup").html("");
			$("#pictureSetGroup").show();
		}
	</script>
</html>
